<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7、state</title>
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        class Weather extends React.Component{
            // 可以直接构造函数外侧赋值，即对象中都会携带这个属性
            state = {isHot:true, wind: '微风'}

            render(){
                const {isHot} = this.state
                return (
                    <h1 onClick={this.changeWeather}>今天的天气很{isHot ? '炎热' : '凉爽'}</h1>
                )
            }
            // 箭头函数没有自己的this，默认寻找外层的this，即Weather对象的this
            changeWeather = () => {
                const {isHot} = this.state
                this.setState({isHot: !isHot})
            }
        }

        ReactDOM.render(<Weather/>, document.getElementById('test'))
    </script>
</body>
</html>